
<template>
  <view :class="isshow ? 'media-item2': 'media-item'" @click="handleClick">
    <!-- 左侧封面图 -->
    <image 
      :src="item.cover || 'https://picsum.photos/200/200?random='+Math.random()" 
      class="cover-image"
      mode="aspectFill"
      :alt="item.title + '封面图'"
    />
    
    <!-- 右侧内容区 -->
    <view class="content-wrapper">
      <!-- 标题行 -->
      <view class="title-line">
        <text class="title-text" :style="{color: titleColor}">{{ item.title }}</text>

      </view>
      
      <!-- 描述信息 -->
      <text class="desc">{{ item.desc || '暂无描述' }}</text>
      
      <!-- 进度条区域 -->
      <view class="progress-area">
        <text class="progress-text">{{ item.progress || 0 }}%</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MediaListItem',
  props: {
    item: {
      type: Object,
      required: true,
      default: () => ({
        cover: '',
        title: '默认标题',
        desc: '',
        progress: 0,
        tag: ''
      })
    },
    progressColor: {
      type: String,
      default: '#42b983'
    },
    titleColor: {
      type: String,
      default: '#333'
    },
	isshow: {
      type: Boolean,
      default: false
    },
    tagBgColor: {
      type: String,
      default: '#ff6b81'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', this.item)
    }
  }
}
</script>

<style scoped>
.media-item2 {
  display: flex;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
 
}
.media-item {
  display: flex;
  padding: 24rpx;
  background: #fff;

 
}
.media-item:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.cover-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.title-line {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: 600;
  margin-right: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  font-size: 22rpx;
  color: #fff;
  padding: 4rpx 16rpx;
  border-radius: 24rpx;
  flex-shrink: 0;
}

.desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.progress-area {
  display: flex;
  align-items: center;
}

.progress-bar {
  flex: 1;
  margin-right: 16rpx;
}

.progress-text {
  font-size: 20rpx;
  color: #666;
  min-width: 80rpx;
  text-align: center;
  line-height: 15px;
  color: #da453c;
  height: 15px;
  background-color: #fef9e8;
  border: 1px solid #f2b5a6;
  border-radius: 20px;
}
</style>
